<template>
  <div>
    <el-row class="row" :gutter="20">
      <el-col :span="16">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/student' }">学生菜单</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/student/topic' }">课题管理</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row class="card" :gutter="20">
      <el-col :span="8" v-if="studentChoice">
        <el-card class="box-card">
          <div slot="header">
            <span>我的课题</span>
            <span style="float: right;">指导教师：
              <el-button type="text" @click="showTeacherInfo(studentChoice.teaNo)">{{studentChoice.teaName}}</el-button>
            </span>
          </div>
          <div class="card-body">
            <div class="topic-card">
              <el-row class="card-row" :gutter="20">
                <el-col>课题编号：{{studentChoice.topNo}}</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>课题名称：{{studentChoice.topName}}</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>课题性质：{{studentChoice.topProperty}}</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>课题类别：{{studentChoice.topCategory}}</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>所属学院：{{studentChoice.colName}}</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>选题状态：
                  <span style="color: #2e99b0">{{studentChoice.choStateDesc}}</span>
                </el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>提交附件：{{studentChoice.choAttach}}</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>选题时间：{{studentChoice.gmtCreate}}</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>修改时间：{{studentChoice.gmtModify}}</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>课题内容：</el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col>
                  <el-input type="textarea" :rows="9" v-model="studentChoice.topContent" :disabled="true"></el-input>
                </el-col>
              </el-row>
              <el-row class="card-row" :gutter="20">
                <el-col :span="12">
                  <el-upload action="/api/storage/file" :on-success="handleUpdaloadSuccess">
                    <el-button type="primary" plain round>提交附件</el-button>
                  </el-upload>
                </el-col>
                <el-col :span="12">
                  <el-button class="right-button" type="danger" plain round @click="complete">确认完成</el-button>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" v-for="(studentComment,index) in studentCommentList" :key="index">
        <el-card class="box-card">
          <div slot="header">
            <span>教师评阅</span>
            <span style="float: right;">评阅教师：
              <el-button type="text" @click="showTeacherInfo(studentComment.teaNo)">{{studentComment.teaName}}</el-button>
            </span>
          </div>
          <div class="card-body">
            <el-row class="card-row" :gutter="20">
              <el-col>
                <div style="color:#ff6767;font-size: 80px; text-align: center; margin-bottom: 5%;  margin-top: 10%">
                  {{studentComment.comScore? studentComment.comScore: '--'}}
                </div>
              </el-col>
            </el-row>
            <el-row class="card-row" :gutter="20">
              <el-col>评阅编号：{{studentComment.comNo}}</el-col>
            </el-row>
            <el-row class="card-row" :gutter="20">
              <el-col>评阅状态：{{studentComment.comStateDesc}}</el-col>
            </el-row>
            <el-row class="card-row" :gutter="20">
              <el-col>指定时间：{{studentComment.gmtCreate}}</el-col>
            </el-row>
            <el-row class="card-row" :gutter="20">
              <el-col>更新时间：{{studentComment.gmtModify}}</el-col>
            </el-row>
            <el-row class="card-row" :gutter="20">
              <el-col>评阅内容：</el-col>
            </el-row>
            <el-row class="card-row" :gutter="20">
              <el-col>
                <el-input type="textarea" :rows="8" v-model="studentComment.comContent" :disabled="true"></el-input>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <teacher-info :teaNo="teaNo" :visible.sync="profileVisible" />
  </div>
</template>

<script>
import TeacherInfo from '../teacher/TeacherInfo'
export default {
  name: 'StudentTopic',
  components: {
    TeacherInfo
  },
  data () {
    return {
      studentChoice: null,
      studentCommentList: [],
      teaNo: '',
      profileVisible: false
    }
  },
  methods: {
    // 获取学生课题信息
    getStudentContent () {
      this.$axios.get('/api/student/choice')
        .then(response => {
          let result = response.data
          if (result.success) {
            this.studentChoice = result.data
            this.listStudentComment()
          } else {
            this.$message.error(result.msg)
          }
        })
    },
    // 获取选题对应评阅信息
    listStudentComment () {
      this.$axios.get('/api/choice/' + this.studentChoice.choNo + '/comment')
        .then(response => {
          let result = response.data
          if (result.success) {
            this.studentCommentList = result.data
          } else {
            this.$message.error(result.msg)
          }
        })
    },
    // 学生确认完成
    complete () {
      const choice = {
        choNo: this.studentChoice.choNo,
        choState: 1
      }
      this.$axios.put('/api/choice', choice)
        .then(response => {
          let result = response.data
          if (result.success) {
            this.$message.success('确认成功！')
          } else {
            this.$message.error(result.msg)
          }
        })
    },
    showTeacherInfo (teaNo) {
      this.teaNo = teaNo
      this.profileVisible = true
    },
    handleUpdaloadSuccess (res) {
      let data = res.data
      let filePath = data.path
      let choiceInfo = {
        choNo: this.studentChoice.choNo,
        choAttach: filePath
      }
      this.$axios.put('/api/choice', choiceInfo)
        .then(response => {
          let result = response.data
          if (result.success) {
            this.$message.success('上传成功！')
            this.studentChoice.choAttach = result.data.choAttach
          } else {
            this.$message.error(result.msg)
          }
        })
    }
  },
  mounted () {
    this.getStudentContent()
  }
}
</script>

<style lang="stylus" scoped>
.row {
  margin: 20px;
}

.card-body {
  height: 550px;
}

.card-row {
  margin-bottom: 10px;
}

.right-button {
  float: right;
}
</style>
